<!--
 * new page
 * @author: sunYihui
 * @since: 2024-08-30
 * NewsView.vue
-->
<template>
  <div class="body">
    <div class="title">管理员列表</div>
    <Table ref="userTable" v-bind="tableConfig">
      <template #search="{ searchSubmit, params }">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input style="width:150px" v-model="params.key" placeholder="搜索关键字" clearable />
          </el-form-item>
          <el-form-item>
            <el-button class="search" type="primary" @click="searchSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- //性别处理 -->
      <template #sex="{ scope }">
        <div> {{ scope.row.sex == 1 ? '男' : '女' }}</div>
      </template>
      <!-- 管理楼栋 -->
      <template #building="{ scope }">
        <div v-for="item in scope.row.building" :key="item.id">{{ item.building }}</div>
      </template>
      <template #buttons>
        <el-button class="add" @click="add">添加</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button class="update" @click="edit(scope.row)">修改</el-button>
        <el-button class="delete" @click="deleteHandle(scope.row.id)">删除</el-button>
      </template>
    </Table>
    <Add @close="closeHandle" v-bind="updataData" v-if="isShow"></Add>
  </div>
</template>
<script lang='ts' setup>
import Add from '../../components/administrator/Add.vue'
import Table from '../../components/table/TableView.vue'
import { tableConfig } from './administrator'
import { ref, reactive } from 'vue'


//通过ref获取表格实例来调用写在表格里面的方法
const userTable = ref<any>();
let isShow = ref(false)
const add = () => {
  isShow.value = true
  Object.assign(updataData, {
    id: null,
    username: '',
    pass: '',
    repass: '',
    name: '',
    tel: "",
    typeid: null
  })
}

const closeHandle = (val:Boolean) => {
  isShow.value = false;
  val && userTable.value.getData()
}

const updataData = reactive<any>([])
const edit = (val: any) => {
  isShow.value = true,
  Object.assign(updataData, val)
  updataData.repass = val.pass

}





</script>
<style scoped lang="less">
@import url(../../assets/styles/baseCss/base.css);
</style>